웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
현재 윈도우에서 새로운 창을 띄울 경우 상황에 따라 자신을 불러온 부모창에 어떤 변화를 줄 경우가 있습니다. 이런 경우는 아래의 경우가 있을 수 있죠.
a. 띄운창에 특정 이미지를 선택시 그 값을 부모창에 넣는 경우
b. 띄운창에 특정 텍스트값을 부모창에 보내는 경우
위와같은 동작을 구현하기 위해서는 자바스크립트를 사용할 수 있고 간단하게 jquery를 사용해 구현이 가능합니다. 이때 사용할 키워드가 opener입니다.
window.opener.$('element');
사용방법은 매우 간단합니다. window.opener는 새창을 띄운 부모요소를 선택하여 가져옵니다. 가져온 요소에 특정 요소를 선택하여 조작할 수 있게되죠.
위 코드는 새로운 창 B를 불러옵니다. 이 창은 test.html이겠죠. 이제 여기서 부모창을 선택해 색상을 변경해 보겠습니다.
매우 간단한 예제입니다.
a. 띄운창에 특정 이미지를 선택시 그 값을 부모창에 넣는 경우
b. 띄운창에 특정 텍스트값을 부모창에 보내는 경우
위와같은 동작을 구현하기 위해서는 자바스크립트를 사용할 수 있고 간단하게 jquery를 사용해 구현이 가능합니다. 이때 사용할 키워드가 opener입니다.
window.opener.$('element');
사용방법은 매우 간단합니다. window.opener는 새창을 띄운 부모요소를 선택하여 가져옵니다. 가져온 요소에 특정 요소를 선택하여 조작할 수 있게되죠.
# 자바스크립트 부모창 접근하기 예제보기
만약 현재창 A에서 새로운 창 B를 부르고 B에서 A의 배경을 변경하는 코드를 실행한다면 다음과 같습니다.<html>
<title>parent window A</title>
<body>
<script>
var popup = window.open('/test.html', 'width=150, height=150');
</script>
</body>
</html>
<title>parent window A</title>
<body>
<script>
var popup = window.open('/test.html', 'width=150, height=150');
</script>
</body>
</html>
위 코드는 새로운 창 B를 불러옵니다. 이 창은 test.html이겠죠. 이제 여기서 부모창을 선택해 색상을 변경해 보겠습니다.
<html>
<title>child window B</title>
<body>
<script>
window.opener.$('body').css('background', 'red');
</script>
</body>
</html>
<title>child window B</title>
<body>
<script>
window.opener.$('body').css('background', 'red');
</script>
</body>
</html>
매우 간단한 예제입니다.
아래의 글도 찾고 계시지 않나요?